<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <qupage title="题库管理">
    <template #hd>
      <el-row>
        <el-col :span="5">
          <el-button @click="centerDialogVisible=true">新增</el-button>
        </el-col>
        <el-col :span="7">
          <el-input v-model="keyword" placeholder="请输入你要搜索的问题" />
        </el-col>
        <el-col :span="6">
          开始时间
          <el-date-picker v-model="stime" type="date" placeholder="Pick a day" />
        </el-col>
        <el-col :span="6">
          结束
          <el-date-picker :disabled-date="countEndTime" v-model="etime" type="date" placeholder="Pick a day" />
        </el-col>
      </el-row>
    </template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="问题id" width="180" />
      <el-table-column prop="title" label="问题标题" width="180" />
      <el-table-column prop="createdAt" label="创建时间">
        <template #default="{ row }">
          {{ formatTime(row.createdAt, 'YYYY-MM-DD HH:mm') }}
        </template>
      </el-table-column>
    </el-table>
    <template #ft>
      <el-pagination small background layout="prev, pager, next,sizes" :total="total" class="mt-4"
        :page-sizes="[5, 10, 30, 50]" @size-change="handleSizeChange" @current-change="handlePageChange" />
    </template>
    <!-- 添加问题的弹窗 -->
    <el-dialog v-model="centerDialogVisible" title="新增一个问题" fullscreen width="60%" center>
      <el-form :model="questionInfo" ref="addForm" label-width="110px">
        <el-form-item label="公司名称">
          <el-input v-model="questionInfo.companyNmae" disabled>
            <template #suffix>
              <button @click="showCompanyList = true">选择公司</button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="questionInfo.title" />
        </el-form-item>
        <el-form-item>
          <vue-qrcode :value="`http://localhost:8080/#/uploadImg?uuid=${uuid}`" :options="{ width: 200 }"></vue-qrcode>
        </el-form-item>
        <el-form-item label="问题描述">
          <v-md-editor v-model="questionInfo.content" height="400px" :disabled-menus="[]"
            @upload-image="handleUploadImage"></v-md-editor>
        </el-form-item>
        <el-form-item label="标签"> </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="confirm">添加</el-button>
      </template>
      <companyPicker :innerVisible="showCompanyList" @change="hadleCompanyChange"></companyPicker>
    </el-dialog>
  </qupage>
</template>
<script setup lang="ts">
import axios from 'axios';
import { addQuestion, getQuestList } from '@/api/qa';
import { ElMessage } from 'element-plus';
// eslint-disable-next-line import/no-extraneous-dependencies
import dayjs from 'dayjs';
// eslint-disable-next-line import/no-extraneous-dependencies
import _ from 'lodash';
import { ref, reactive, onMounted, computed } from 'vue';

const keyword = ref<string>('');let tableData = reactive([]);
let centerDialogVisible = ref<any>(false);
let showCompanyList = ref<any>(false);
const questionInfo = reactive({
  companyNmae: '',
  companyId: '',
  title: '',
  content: '',
  tags: '',
  uid: '',
});
const uuid = ref<string>('');
const total = ref(0);
const limit = ref<number>(5);
const curPage = ref<number>(1);
const stime = new Date();
const etime = null;

onMounted(() => {
  getList();
});
const $skip = computed(() => (curPage.value - 1) * limit.value);

// watch: {
//   keyword(nv) {
//     console.log('搜索的关键字发生了变化', nv);
//     this.curPage = 1;
//     this.getList();
//   },
// },
const countEndTime = (time: any) => {
  const t = time.getTime();
  const st = stime.getTime();
  const d = new Date();
  d.setHours(23, 59, 59, 99);
  const lt = d.getTime();
  if (t > lt || st > t) return true;
  return false;
};
const handlePageChange = (res: any) => {
  console.log('页面发生了变化', res);
  curPage.value = res;
  getList();
};
const handleSizeChange = (res: any) => {
  console.log('每页条数发生变化', res);
  limit.value = res;
  getList();
};
const hadleCompanyChange = (res: any) => {
  console.log('选择的公司是', res);
  questionInfo.companyNmae = res.name;
  questionInfo.companyId = res.id;
  showCompanyList = false;
};
const confirm = async () => {
  console.log('我是添加的操作', questionInfo);
  const { companyId, title, content } = questionInfo;
  const res = await addQuestion({
    companyId,
    title,
    content,
    tags: 'consequat consectetur cillum Lorem commodo',
    uid: '86',
  });
  console.log('res', res);
  // eslint-disable-next-line
  const { statusText, data } = res;
  if (statusText === 'Created') {
    ElMessage({
      message: '添加到成功',
      type: 'success',
    });
    centerDialogVisible = false;
    // eslint-disable-next-line no-unused-expressions, no-sequences
    questionInfo.companyNmae = '',
    questionInfo.companyId = '',
    questionInfo.title = '',
    questionInfo.content = '',
    questionInfo.tags = '',
    questionInfo.uid = '',
    getList();
  }
};
const handleUploadImage = (event: any, insertImage: any, File: any) => {
  console.log('files', File);

  const uploadinfo = new FormData();
  uploadinfo.append('type', '2205');
  uploadinfo.append('files', File[0]);
  axios.post('http://www.wzsqyg.com/attachment/upload', uploadinfo).then((res) => {
    console.log('上传的结果', res);
    insertImage({
      url: res.data.msg,
      desc: res.data.msg.split('/').pop(),
    });
  });
};
const getList: _.debounce = async () => {
  const queryData = {};
    if (keyword) queryData.title = keyword;
    const res = await getQuestList({
      $limit: limit,
      $skip: $skip,
      ...queryData,
    });
    console.log('res', res);
    tableData = res.data.data;
    total = res.data.total;
  }, 300),
    formatTime(_d, str) {
    return dayjs(_d).format(str);
  };
// methods: {
  // countEndTime(time) {
  //   const t = time.getTime();
  //   const st = this.stime.getTime();
  //   const d = new Date();
  //   d.setHours(23, 59, 59, 99);
  //   const lt = d.getTime();
  //   if (t > lt || st > t) return true;
  //   return false;
  // },
  // handlePageChange(res) {
  //   console.log('页面发生了变化', res);
  //   this.curPage = res;
  //   this.getList();
  // },
  // handleSizeChange(res) {
  //   console.log('每页条数发生变化', res);
  //   this.limit = res;
  //   this.getList();
  // },
  // hadleCompanyChange(res) {
  //   console.log('选择的公司是', res);
  //   this.questionInfo.companyNmae = res.name;
  //   this.questionInfo.companyId = res.id;
  //   this.showCompanyList = false;
  // },
  // async confirm() {
  //   console.log('我是添加的操作', this.questionInfo);
  //   const { companyId, title, content } = this.questionInfo;
  //   const res = await addQuestion({
  //     companyId,
  //     title,
  //     content,
  //     tags: 'consequat consectetur cillum Lorem commodo',
  //     uid: '86',
  //   });
  //   console.log('res', res);
  //   // eslint-disable-next-line
  //  const { statusText, data } = res;
  //   if (statusText === 'Created') {
  //     ElMessage({
  //       message: '添加到成功',
  //       type: 'success',
  //     });
  //     this.centerDialogVisible = false;

//     this.questionInfo = {
//       companyName: '',
//       companyId: '',
//       title: '',
//       content: '',
//       tags: '',
//       uid: '',
//     };
//     this.getList();
//   }
// },
// handleUploadImage(event, insertImage, File) {
//   console.log('files', File);

//   const uploadinfo = new FormData();
//   uploadinfo.append('type', '2205');
//   uploadinfo.append('files', File[0]);
//   axios.post('http://www.wzsqyg.com/attachment/upload', uploadinfo).then((res) => {
//     console.log('上传的结果', res);
//     insertImage({
//       url: res.data.msg,
//       desc: res.data.msg.split('/').pop(),
//     // width: 'auto',
//     // height: 'auto',
//     });
//   });
// },
// eslint-disable-next-line
//   getList: _.debounce(async function () {
//     const queryData = {};
//     if (this.keyword) queryData.title = this.keyword;
//     const res = await getQuestList({
//       $limit: this.limit,
//       $skip: this.skip,
//       ...queryData,
//     });
//     console.log('res', res);
//     this.tableData = res.data.data;
//     this.total = res.data.total;
//   }, 300),
//     formatTime(_d, str) {
//     return dayjs(_d).format(str);
//   },
// },
</script>
<script lang="ts">
export default {
  name: 'qupage',
}
</script>
<style lang="scss" scoped>

</style>
